<template>
    <div>
        <header-footer :commonData="{$parent:$parent}">
            <div class="online_apply" v-cloak>
                <div class="crumb">
                    <ul>
                        <li class="color666 f_left">当前位置：</li>
                        <li>
                            <router-link class="color666 f_left" to="/home">首页></router-link>
                        </li>
                        <li class="color666 f_left">在线报名</li>
                    </ul>
                </div>
                <div class="border_content text_center" v-if="stepIndex==0">
                    <img src="/static/img/title1.png" class="contTitleImg">
                    <h3 class="apply_title">专业技术人员继续教育报名</h3>
                    <h4 class="apply_title_explain">请填写您的报名信息</h4>
                    <el-form class="apply_form" label-width="180px" style="width: 560px;">
                        <el-form-item class="text_left" label="姓名：">
                            <p class="apply_p">{{form.userName}}</p>
                        </el-form-item>
                        <el-form-item class="text_left" label="身份证号：">
                            <p class="apply_p">{{form.identity}}</p>
                        </el-form-item>
                        <el-form-item label="选择专业：" class="choose_project">
                            <el-select v-model="form.typeName" placeholder="选择专业" @change="typeChange">
                                <el-option v-for="item in chooseTypes" :key="item.typeCode" :label="item.typeName"
                                    :value="item.typeCode">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item class="text_left faceEducation" label="参加行业公需课：">
                            <el-radio v-model="pruduct.publicProductCode" label="hygxk">是</el-radio>
                            <el-radio v-model="pruduct.publicProductCode" label="">否</el-radio>
                        </el-form-item>
                        <el-form-item label="选择发票：" class="choose_project">
                            <el-input v-model="invoiceTitle" readonly @focus="ticketDialogs = true"></el-input>
                            <a type="button" class="select_class" @click="ticketDialogs = true">选择发票</a>
                        </el-form-item>
                        <el-form-item class="apply_btns">
                            <router-link class="apply_return" to="/cont_education/index">返回</router-link>
                            <a @click="onSubmit">确认提交</a>
                        </el-form-item>
                    </el-form>
                    <!-- 选择发票 -->
                    <el-dialog :visible.sync="ticketDialogs">
                        <ticketDialog @ticketDialogBtn="ticketDialogBtns" :showBtn="1"></ticketDialog>
                    </el-dialog>
                </div>
                <div class="border_content text_center" v-if="stepIndex==1">
                    <img src="/static/img/title2.png" class="contTitleImg">
                    <h3 class="apply_title">专业技术人员继续教育报名</h3>
                    <h4 class="apply_title_explain">请确认您的报名信息</h4>
                    <el-form class="apply_form" ref="form" :rule="form" label-width="180px" style="width: 560px;">
                        <el-form-item class="text_left" label="姓名：">
                            <p class="apply_p">{{form.userName}}</p>
                        </el-form-item>
                        <el-form-item class="text_left" label="身份证号：">
                            <p class="apply_p">{{form.identity}}</p>
                        </el-form-item>
                        <el-form-item class="text_left" label="报考专业：">
                            <p class="apply_p">{{typeName}}</p>
                        </el-form-item>
                        <el-form-item class="text_left" label="课时：">
                            <p class="apply_p">{{pruduct.period}}课时</p>
                        </el-form-item>
                        <el-form-item class="text_left" label="价格：">
                            <p class="apply_p">{{pruduct.productPrice}}元</p>
                        </el-form-item>
                        <el-form-item label="发票抬头：" class="choose_project">
                            <p class="apply_p">{{invoiceTitle}}</p>
                        </el-form-item>
                        <el-form-item label="发票类型：" class="choose_project">
                            <p v-if="pruduct.invoiceType==0" class="apply_p">个人</p>
                            <p v-if="pruduct.invoiceType==1" class="apply_p">普票</p>
                        </el-form-item>
                        <el-form-item class="apply_btns confirm_btns">
                            <p style="color: #FF0000;font-size: 18px;width: 600px;text-align: left;margin-bottom: 10px;">提示：支付宝扫码完成付款后请等待页面跳转完成后再关闭网页!</p>
                            <a class="apply_return" @click="prevStep">上一步</a>
                            <a @click="confirmPay">去付款</a>
                        </el-form-item>
                    </el-form>
                </div>
            </div>
        </header-footer>
    </div>
</template>

<script>
    import headerFooter from '../../../components/cont_education/header_and_footer.vue'
    import ticketDialog from '../../../components/invoice_lists.vue'
    export default {
        name: "zyjsry_apply",
        data: function() {
            return {
                stepIndex: 0, //是否显示选择专业弹框
                chooseTypes: [{
                        "typeName": "不需要",
                        "typeCode": "1"
                    },
                    {
                        "typeName": "房建专业",
                        "typeCode": "fjzyk"
                    },
                    {
                        "typeName": "市政专业",
                        "typeCode": "szzyk"
                    },
                    {
                        "typeName": "机电专业",
                        "typeCode": "jdzyk"
                    },
                    {
                        "typeName": "规划专业",
                        "typeCode": "ghzyk"
                    }
                ],
                dialogNoPay: false,
                form: {
                    identity: "",
                    userName: "",
                    typeName: ""
                },
                projectCode: this.$route.params.type,
                dialogVisible: false, //选择专业
                ticketDialogs: false, //选择发票
                invoiceTitle: "",
                currentApply: undefined,
                pruduct: {
                    period: 0,
                    productPrice: "",
                    invoiceTempId: "",
                    invoiceType: 0,
                    majorProductCode: "",
                    publicProductCode: "hygxk"
                },
                hPrice:0,
                zPrice:0,
                typeName: "",
                zhuanye:"",
                products: []
            }
        },
        mounted: function() {
            var that = this;
            this.common.post(this.api.getCombApply, {}, function(res) {
                var info = res.resultMap;
                that.form.userName = info.realName;
                that.form.identity = info.identityCode;
            });
            
            this.common.post(this.api.getProducts, {}, function(res) {
                that.products = res.resultMap;
            });
        },
        methods: {
            typeChange: function(val) {
                var that = this;
                this.products.forEach(function(v,i){
                    if(val==v.productCode){
                        that.zPrice=v.productPrice;
                    }
                    if("hygxk"==v.productCode){
                        that.hPrice=v.productPrice;
                    }
                });
                this.chooseTypes.forEach(function(v, i) {
                    if (v.typeCode == val) {
                        that.form.typeName = v.typeName;
                        that.typeName = v.typeName;
                        that.zhuanye=v.typeName;
                        that.pruduct.majorProductCode = v.typeCode;
                    }
                });
            },
            // 报名确认
            onSubmit: function() {
                var that = this;
                if (this.pruduct.majorProductCode == "1" && this.pruduct.publicProductCode == "") {
                    this.$message.error('请选择专业课或行业公需课！');
                    return;
                }
                if (that.pruduct.invoiceTempId == "") {
                    this.$message.error('请选择发票！');
                    return;
                }

                if (this.pruduct.majorProductCode == "1") {
                    this.typeName = "行业公需课";
                    this.pruduct.majorProductCode="";
                    this.pruduct.productPrice = this.hPrice;
                    this.pruduct.period = 20;
                } else if (this.pruduct.publicProductCode == "") {
                    this.typeName = this.zhuanye;
                    this.pruduct.productPrice = this.zPrice;
                    this.pruduct.period = 60;
                } else {
                    this.typeName = this.typeName + "+" + "行业公需课";
                    this.pruduct.productPrice = parseInt(this.zPrice)+parseInt(this.hPrice);
                    this.pruduct.period = 80;
                }
                this.stepIndex = 1;
            },
            //上一步
            prevStep: function() {
                this.stepIndex = 0;
            },
            //去付款
            confirmPay: function() {
                var that = this;
                if (that.form.typeName == "") {
                    this.$message.error('请选择专业！');
                    return;
                }
                this.common.post(this.api.launchZjApplyTrade, this.pruduct, function(data) {
                    that.common.toPage("/home/apply/zhifubaopre/" + data.resultMap);
                }, function(error) {
                    that.$message.error(error.resultMsg);
                });
            },
            ticketDialogBtns: function(data) {
                // console.log(JSON.stringify(data));
                if (data == false) {
                    this.ticketDialogs = false;
                    return;
                }
                this.ticketDialogs = false;
                this.invoiceTitle = data.invoiceTitle;
                this.pruduct.invoiceTempId = data.invoiceTempId;
                this.pruduct.invoiceType = data.invoiceType;
            }
        },
        components: {
            headerFooter,
            ticketDialog
        }
    }
</script>

<style>
    .header {
        width: 1150px;
		margin: 0 auto;
    }

    .el-checkbox {
        margin-right: 0;
    }
</style>
